<template>
	<view class="pl-30 pr-30 mt-20">
		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<view class="flex">
				<view class="item-nav">
					<view class="mt-20 mb-20">
						<text class="font-36 font-color font-bold">猜你爱看</text>
					</view>
					<view class="video-item" v-for="item in videoList" :key="item._id" @click="toVideoDetail(item)">
						<u-image :src="item.tv_image" width="200rpx" height="120rpx" radius="16rpx"></u-image>
						<view class="ml-20 flex flex-1 flex-column">
							<text class="font-28 font-color text-ellipsis">{{ item.tv_name }}</text>
							<view class="flex jc-between" style="margin-top: auto;">
								<text class="font-24 font-color-3 text-ellipsis">全132集</text>
								<text class="font-24 font-color-3 text-ellipsis">423播放</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item-nav">
					<view class="mt-20 mb-20">
						<text class="font-36 font-color font-bold">猜你爱看</text>
					</view>
					<view class="video-item" v-for="item in videoList" :key="item._id" @click="toVideoDetail(item)">
						<u-image :src="item.tv_image" width="200rpx" height="120rpx" radius="16rpx"></u-image>
						<view class="ml-20 flex flex-1 flex-column">
							<text class="font-28 font-color text-ellipsis">{{ item.tv_name }}</text>
							<view class="flex jc-between" style="margin-top: auto;">
								<text class="font-24 font-color-3 text-ellipsis">全132集</text>
								<text class="font-24 font-color-3 text-ellipsis">423播放</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
  name: 'LikeVideo',
  data() {
    return {}
  },
  props: {
    videoList: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    async toVideoDetail(item) {
      // if (item.tv_id) {
      //   const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
      //   item = tvinfo.result.data[0]
      // }
      vk.vuex.set('$app.currenttv', item)
      uni.navigateTo({ url: '/pages/player/player?tv_id=' + item._id + '&series=' + item.series, })
    },
  }
}
</script>

<style lang="scss" scoped>
	.item-nav {
		min-width: 500rpx;
		max-width: 500rpx;
		padding: 20rpx 24rpx;
		margin-right: 40rpx;
		border-radius: 24rpx;
		background-image: linear-gradient(to bottom, #EDFDFC, #FBFCEF);
	}
	
	.item-nav:nth-of-type(2) {
		background-image: linear-gradient(to bottom, #FFE8E4, #FBFFE7);
	}

	.video-item {
		display: flex;
		margin-bottom: 20rpx;
	}
</style>
